<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname">
    <span>{{ msg }}</span>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  // data放数据；methods放方法；computed放计算属性；watch放侦听器；..............
  data () {
    return {
      uname: 'zs',
      msg: ''
    }
  },
  watch: {
    // ------------------------ 函数写法 ------------------------------
    // 数据项 (新值, 原值) {

    // }

    // uname (newVal, oldVal) {
    //   console.log(newVal, oldVal)
    // }

    // ------------------------ 对象写法 ------------------------------
    // 数据项: {
    //   handler (新值, 原值) {},
    //   immediate: true, // 可选
    //   deep: true // 可选
    // }

    uname: {
      async handler (newVal) {
        // console.log(newVal)
        const {data: res} = await axios.get('http://www.itcbc.com:3006/api/finduser/' + newVal)
        // console.log(res)
        this.msg = res.message
      }
    }
    
  }
}
</script>

<style>

</style>